<script setup>
import { ref, defineProps, watch, getCurrentInstance } from "vue";
import useChat from "@/store/useChat.js";
import { storeToRefs } from "pinia";
const _this = getCurrentInstance();
const useChatStore = useChat();
const { currentPlayId } = storeToRefs(useChatStore);
const isFullScreen = ref(false);
const props = defineProps({
  videoId: {
    type: String,
    default: "",
  },
});
let videoContext = undefined;

//自定义开始播放
const onPlayCostom = (event) => {
  videoContext = uni.createVideoContext(props.videoId, _this);
  videoContext.requestFullScreen();
  videoContext.play();
  currentPlayId.value = props.videoId;
};
//是否全屏监听 不全屏暂停播放
const fullScreenChange = (event) => {
  isFullScreen.value = event.detail.fullScreen;
  if (!event.detail.fullScreen) {
    videoContext.pause();
  }
};

//监听播放id id切换后如果不是当前组件视频 就暂停掉当前视频
watch(currentPlayId, (val, oldVal) => {
  if (val != props.videoId) {
    try {
      videoContext?.pause();
    } catch {}
  }
});
</script>

<template>
  <view class="main">
    <view class="video-msg-type">
      <view class="video-play-icon" @click="onPlayCostom">
        <u-icon color="#fff" size="80" name="play-right-fill"></u-icon>
      </view>

      <video
        @fullscreenchange="fullScreenChange"
        :id="videoId"
        :controls="isFullScreen"
        src="http://vd3.bdstatic.com/mda-ra83cf9gmph0wa4x/360p/h264/1736389367987680773/mda-ra83cf9gmph0wa4x.mp4"
      ></video>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.video-msg-type {
  position: relative;
  display: inline-block;
  .video-play-icon {
    position: absolute;
    z-index: 2;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
  }
}
</style>
